$(function () {
    //浏览器大小发生改变 模态框
    $(window).resize(function () {
        showShade();
    });
    //点击span关闭
    $(".model-close").bind("click", function () {
        $(".mask").fadeOut(500);
        $(".content-wapper").fadeOut(500);
    });
    //居中显示
    function showShade() {
        var $vW = $(window).width();
        var $w = $(".content-wapper").outerWidth();
        var $vH = $(window).height();
        var $h = $(".content-wapper").outerHeight();
        $(".content-wapper").css({
            "left": ($vW - $w) / 2 + "px",
            "top": ($vH - $h) / 2 + "px"
        });
    };
    //绑定键盘事件  按下esc键退出
    $(document).keyup(function (ev) {
        //                alert(ev.keyCode);  获取esc的键码27
        if (ev.keyCode == 27) {
            //                    $("span").click();
            //模拟事件
            $(".model-close").trigger("click");
        }
    })

    //页面右侧项目信息
    //获取项目id 全局变量
    var search=location.search;
    var projectId=search.split("=")[1];
    $.ajax({
        url:'/chart/getDetailTimeByProjectId?projectId='+projectId,
        type:'GET',
        dataType: "json",
        success:function(result){
            // console.log(result);
            var data=result.data;
            var html="";
            html="<p class=\"project-name\">\n" +
                "                        <span>项目名称</span>\n" +
                "                        <span title="+data.projectName+">"+data.projectName+"</span>\n" +
                "                    </p>\n" +
                "                    <p>\n" +
                "                        <span>责任单位</span>\n" +
                "                        <span title="+data.resUnit+">"+data.resUnit+"</span>\n" +
                "                    </p>\n" +
                "                    <p>\n" +
                "                        <span>开始时间</span>\n" +
                "                        <span>"+data.beginTime+"</span>\n" +
                "                    </p>\n" +
                "                    <p>\n" +
                "                        <span>结束时间</span>\n" +
                "                        <span>"+data.endTime+"</span>\n" +
                "                    </p>\n" +
                "                    <p>\n" +
                "                        <span>计划时间</span>\n" +
                "                        <span>"+data.planTime+"</span>\n" +
                "                    </p>\n" +
                "                    <p>\n" +
                "                        <span>实际时间</span>\n" +
                "                        <span>"+data.factTime+"</span>\n" +
                "                    </p>\n" +
                "                    <p class=\"time-status\">\n" +
                "                        <span>用时状态</span>\n" +
                "                        <span>"+data.timeState+"</span>\n" +
                "                    </p>\n" +
                "                    <p>\n" +
                "                        <span>项目等级</span>\n" +
                "                        <span>"+data.itemGrade+"</span>\n" +
                "                    </p>";
            $(".content-1-main").html(html);
        }
    })

    /**
     * 总完成情况折线图
     */
    function finishSuition(opt) {
        //接入数据
        var dataArr = [];
        var xAxisData = [];
        var days= [];
        for(var key in opt.data.nodes){
            xAxisData.push(opt.data.nodes[key].nodeId);
            dataArr.push(opt.data.nodes[key].percent);
            days.push(opt.data.nodes[key].timeState);
        }

        // "{a} <br/>{b} : {c} ({d}%)"
        var  option = {
            tooltip : {
                trigger: 'item',
                formatter:function (value) {
                    if(value.value>0){
                        return value.value*100+'%</br>'+"(超前"+days[value.dataIndex]+"天)";
                    }else if(value.value<0) {
                        return (value.value*-1)*100+'%</br>'+"(逾期"+days[value.dataIndex]+"天)";
                    }else {
                        return value.value*100+'%</br>'+"(正常"+days[value.dataIndex]+"天)";
                    }
                }
            },
            xAxis: {
                nameTextStyle:{
                    color:"#fff",  //设置x轴文字颜色样式
                },
                data: xAxisData,
                name: "大节点序号",
                silent: false,
                axisLine: {
                    onZero: true,
                    lineStyle:{
                        color:'#1565A5'
                    }
                },
                splitLine: {//网格线
                    show: true,
                    lineStyle:{
                        color:"rgba(255,255,255,.2)",
                    },
                    smooth:true,
                },
                splitArea: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff' //修改x轴字体颜色
                    }
                }
            },
            yAxis: {
                name:"百分比",
                nameTextStyle:{
                    color:"#fff",  //设置y轴文字颜色样式
                },
                axisLine:{
                    lineStyle:{
                        color:'#1565A5',
                    }
                },
                inverse: false,
                splitLine:{
                    lineStyle:{
                        color:"rgba(255,255,255,.2)"
                    }
                },
                splitArea: {
                    show: false
                },
                axisLabel:{
                    formatter: function (value) {
                        var texts = [];
                        if(value==0){
                            texts.push('正常');
                        }
                        return texts;
                    },
                    color:"#fff"
                }
            },
            grid: {
                left: "5%",
                top:30,
                bottom:25,
                right:75
            },
            series: [{
                //dada数据折线数据
                animationDuration: 4000, //设置动画延时
                data: dataArr ,
                type: "line",
                symbol: "circle", //设定为实心点
                symbolSize: 13, //设定实心点的大小
                itemStyle: {
                    normal: {
                        color: "#9EC1FF", //小圆点颜色
                        lineStyle: {
                            color: "#31BAF3", //折线颜色
                            width: 5
                        }
                    }
                }
            }]
        };
        var _ec = echarts.init(document.getElementById("finish-situation"));
        _ec.setOption(option);
        window.addEventListener("resize", function() {
            _ec.resize();
        });
    }

    /**
     * 效率最高
     */
    function hight(opt){
        var mychart = document.getElementById("hight-efficiency");
        var dataArr=[];
        var dataX=[];
        for(var i=0;i<opt.data.effecListMap.hightEffect.length;i++){
            dataArr.push(opt.data.effecListMap.hightEffect[i].percent);
            dataX.push(opt.data.effecListMap.hightEffect[i].nodeId);
        }

        option = {
            grid: { //调整位置大小
                top:10,
                bottom:25,
                right:3
            },
            xAxis: {
                type: 'category',
                data: dataX,
                axisLabel: {
                    color:"#fff" ,
                    fontSize:16
                },
                axisLine:{
                    lineStyle:{
                        color:'#89d6fc',
                        width:1,//这里是为了突出显示加上的，可以去掉
                    }
                }

            },
            yAxis: {
                type: 'value',
                show: false, //y 显示隐藏
                // 去除y轴上的刻度值
                axisLabel: {
                    show: false,
                },
                //去掉网格线
                splitLine:{
                    show:false
                },
                //去掉刻度线
                axisTick: {
                    show: false
                },
                name:""
            },
            barWidth:25,
            series: [{
                data: dataArr,
                animationDuration: 5000,
                type: 'bar',
                // itemStyle:{
                //     barBorderRadius:[50,50,0,0]
                // }
            }],
            color:"#89d6fc"
        };

        var _ec = echarts.init(mychart);
        _ec.setOption(option);
        //点击事件
        // _ec.on('click', function (params) {
        //     //获取页面宽度
        //     function showShade() {
        //         var $vW = $(window).width();
        //         var $w = $(".content-wapper").outerWidth();
        //         var $vH = $(window).height();
        //         var $h = $(".content-wapper").outerHeight();
        //         $(".content-wapper").css({
        //             "left": ($vW - $w) / 2 + "px",
        //             "top": ($vH - $h) / 2 + "px"
        //         });
        //     };
        //     $(".mask").fadeIn(1000);
        //     $(".content-wapper").fadeIn(1000);
        //     $(this).css("display", "none");
        //     showShade();
        // });
        window.addEventListener("resize", function() {
            _ec.resize();
        });
    }

    $.ajax({
        url: '/chart/gettaskfinisheddetail',
        data:{projectId:projectId},
        type: 'GET',
        dataType: "json",
        success: function (result) {

            console.log(result);
            //折线图调用
            finishSuition(result);
            //总完成天数
            $(".finish-day>em").html(result.data.countFinishDays);
            //超前天数
            $(".advance>em").html(result.data.earlyFinishedDays);

            var html="";
            var list=result.data.effecListMap.hightEffect;
            for(var i=0;i<list.length;i++){
                html+='\
                    <p>\
                    <span>'+list[i].nodeId+' &nbsp;&nbsp;占比（'+(list[i].percent*100).toFixed(2)+'%）</span>\
                </p>\
                    ';
                //效率最高
                hight(result,i);
            }
            $(".data-content").html(html)

            var html2="";
            var list2=result.data.effecListMap.lowEffect;
            for(var i=0;i<list2.length;i++){
                html2+='\
                    <p>\
                    <span>'+list2[i].nodeId+' &nbsp;&nbsp;占比（'+(list2[i].percent*100).toFixed(2)+'%）</span>\
                </p>\
                    ';
                //效率最低
                low(result);
            }
            $(".data-content-2").html(html2);

        }
    });

    /**
     * 效率最低
     */
    function low(opt){
        var mychart = document.getElementById("low-efficiency");
        var dataArr=[];
        var dataX=[];
        for(var i=0;i<opt.data.effecListMap.lowEffect.length;i++){
            dataArr.push(opt.data.effecListMap.lowEffect[i].percent);
            dataX.push(opt.data.effecListMap.lowEffect[i].nodeId);
        }
        option = {
            grid: { //调整位置大小
                top:10,
                bottom:25,
                right:3
            },
            xAxis: {
                type: 'category',
                data: dataX,
                axisLabel: {
                    color:"#fff" ,
                    fontSize:16,
                },
                axisLine:{
                    lineStyle:{
                        color:'#89d6fc',
                        width:1,//这里是为了突出显示加上的，可以去掉
                    }
                }

            },
            yAxis: {
                type: 'value',
                show: false, //y 显示隐藏
                // 去除y轴上的刻度值
                axisLabel: {
                    show: false,
                },
                //去掉网格线
                splitLine:{
                    show:false
                },
                //去掉刻度线
                axisTick: {
                    show: false
                },
                name:""
            },
            barWidth:25,
            series: [{
                animationDuration: 5000,
                data: dataArr,
                type: 'bar',
                // itemStyle:{
                //     barBorderRadius:[50,50,0,0]
                // }
            }],
            color:"#89d6fc"
        };

        var _ec = echarts.init(mychart);
        _ec.setOption(option);
        //点击事件
        // _ec.on('click', function (params) {
        //     //获取页面宽度
        //     function showShade() {
        //         var $vW = $(window).width();
        //         var $w = $(".content-wapper").outerWidth();
        //         var $vH = $(window).height();
        //         var $h = $(".content-wapper").outerHeight();
        //         $(".content-wapper").css({
        //             "left": ($vW - $w) / 2 + "px",
        //             "top": ($vH - $h) / 2 + "px"
        //         });
        //     };
        //     $(".mask").fadeIn(1000);
        //     $(".content-wapper").fadeIn(1000);
        //     $(this).css("display", "none");
        //     showShade();
        // });
        window.addEventListener("resize", function() {
            _ec.resize();
        });
    }

    /**
     * 考核情况-1
     */
    function situation(opt,key) {
        var option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //更改圆饼图颜色
            color: ["#FE5E5E", "#FFF100", "#00B0FF"],
            series: [{
                animationDuration: 2000,
                name: "考核情况",
                type: "pie",
                radius: "80%",
                center: ["50%", "50%"],
                data: [{
                    value: opt.data[key].beyond,
                    name: "超前"
                },
                    {
                        value: opt.data[key].normal,
                        name: "正常"
                    },
                    {
                        value: opt.data[key].late,
                        name: "逾期"
                    }
                ].sort(function (a, b) {
                    return a.value - b.value;
                }),
                roseType: "radius",
                label: {
                    normal: {
                        textStyle: {
                            color: "rgba(255, 255, 255, 0)"
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0)"
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                }
            }],
        };
        var id="item-"+key;
        var _ec = echarts.init(document.getElementById(id));
        _ec.setOption(option);
        window.addEventListener("resize", function() {
            _ec.resize();
        });
    }

    $.ajax({
        url:'/chart/getProDetailOrderByDept',
        type:'GET',
        data:{projectId:projectId},
        dataType: "json",
        success:function(result){
            // console.log(result);
            var html="";
            for(var key in result.data){
                html+='\
                       <div class="item-1 lf">\
                                        <p>\
                                          <span class="projectname hidden-font" title='+result.data[key].dept+'>'+result.data[key].dept+'</span>\
                                           <span>考核情况：超前'+result.data[key].beyondFinishedDays+'天</span>\
                                       </p>\
                                      <div class="left">\
                                           <p>总任务数：<em>'+result.data[key].allNode+'</em>项</p>\
                                           <p>已完成数：<em>'+result.data[key].finished+'</em>项</p>\
                                           <p>未完成数：<em>'+result.data[key].noFinish+'</em>项</p>\
                                       </div>\
                                      <div class="right">\
                                           <p>超前：<em>'+result.data[key].beyond+'</em>项</p>\
                                            <p>正常：<em>'+result.data[key].normal+'</em>项</p>\
                                           <p>逾期：<em>'+result.data[key].late+'</em>项</p>\
                                            <div class="color-div">\
                                                <div class="col-1"></div>\
                                             <div class="col-2"></div>\
                                              <div class="col-3""></div>\
                                          </div>\
                                     </div>\
                                      <!-- 饼状图 -->\
                                       <div id="item-'+key+'"></div>\
                                   </div> \
                              ';
            }
            $(".item").html(html);
            for(var key in result.data){
                situation(result,key);
            }
            // 滚动条api
            $('.item').perfectScrollbar();
        }
    })




})
